<template>
  <div class="course">
    <div class="xiding">
      <div class="search-box">
        <div class="search" @click="$router.push('/search')">
          <span class="iconfont icon-sousuo"></span>
          <p>搜索课程</p>
        </div>
      </div>
      <van-dropdown-menu>
        <van-dropdown-item class="van-dropdown-item" title="分类" ref="item">
          <div class="button">
            <van-button class="van-button" type="default" @click="reset">
              重置
            </van-button>
            <van-button class="van-button" type="danger" @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item style="text-align: center" ref="items" title="排序">
          <div
            class="item"
            v-for="(item, i) in option"
            :key="i"
            @click="qr(i)"
            :class="i === values ? 'active' : ''"
          >
            {{ item.text }}
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" ref="itemsd">
          <div class="filter-box">
            <div class="tmk-item">
              <span
                v-for="(item, i) in list"
                :key="i"
                @click="qd(i)"
                :class="i === value ? 'span' : ''"
                >{{ item.name }}</span
              >
            </div>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <van-list
      class="list-box"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
    >
      <mydetaillist
        v-for="item in courseList"
        :key="item.id"
        :item="item"
      ></mydetaillist>
    </van-list>
  </div>
</template>

<script>
import { getcourseBasisa, getOther } from "../../utils/api";
import mydetaillist from "@/components/class/mydetaillist";
export default {
  name: "Course",
  data() {
    return {
      loading: false,
      finished: false,
      value: 0,
      values: 0,
      option: [
        {text: "综合列表",value: 0},
        {text: "最新",value: 1},
        { text: "最热", value: 2 },
        { text: "价格从低到高", value: 3 },
        { text: "价格从高到低", value: 4 },
      ],
      list: [],
      courseList: [],
      page: 1,
    };
  },
  components: {
    mydetaillist,
  },
  created() {
    this.getCourese();
    //
    getOther().then((res) => {
      // console.log(res.data.appCourseType);
      this.list = res.data.appCourseType;
    });
  },
  methods: {
 getCourese() {
      let obj = {
        limit: 10,
        page: this.page,
        course_type: this.value,
        is_vip: 0,
        order_by: this.values,
      };
      getcourseBasisa(obj)
      .then((res) => {
          this.courseList = res.data.list; 
      });
    },
   
    reset() {
      this.getCourese()
      this.$refs.item.toggle();
    },
    onConfirm() {
      this.getCourese()
      this.$refs.item.toggle();
    },
    qr(i) {
      this.values = i;
      this.$refs.items.toggle();
      this.getCourese();
    },
    qd(i) {
      console.log(i);
      this.value = i;
      this.$refs.itemsd.toggle();
      this.getCourese();
    },
  },
};
</script>

<style lang="scss" scoped>
.xiding {
  width: 100%;
}
.list-box {
  width: 100%;
  height: calc(100% - 92px);
  overflow: auto;
}
.course {
  width: 100%;
  height: 100%;
  background: #f7f8fa;
  overflow: hidden;
}
.search-box {
  width: 100%;
  height: 44px;
  padding: 5px 0px 0px;
  background: #fff;
  .search {
    width: 90%;
    height: 37px;
    border: 1px solid #d9d9d9;
    border-radius: 30px;
    margin: 0px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconfont {
      font-size: 12px;
      color: #b7b7b7;
      margin: 0px 10px 0px 0px;
    }
    p {
      color: #b7b7b7;
    }
  }
}
.button {
  width: 100%;
  height: 68px;
  line-height: 68px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 10px;

  .van-button {
    width: 100%;
    height: 35px;
    display: inline-block;
    margin: 0 5px;
    border-radius: 7px;
  }
}
.item {
  width: 100%;
  height: 52px;
  line-height: 52px;
}
.active {
  color: red;
}
.filter-box {
  width: 100%;
  height: 115.8px;
  padding: 20px 0 0 15px;
  .tmk-item {
    width: 100%;
    height: 84px;
    span {
      display: inline-block;
      font-size: 13px;
      margin: 0 20px 7px 0;
      border-radius: 6px;
      text-align: center;
      font-family: PingFangSC-Regular;
      width: 69px;
      height: 33px;
      line-height: 33px;
      color: #646464;
      background: #f5f5f5;
    }
    .span {
      color: #e60012;
      background: #ebeefe;
    }
  }
}
</style>